<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 页面标题区域 -->
    <div class="bg-white shadow-sm border-b border-gray-200">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="text-center">
          <h1 class="text-4xl font-bold text-gray-900 mb-4">新闻资讯</h1>
          <nav class="flex justify-center" aria-label="Breadcrumb">
            <ol class="flex items-center space-x-2 text-sm text-gray-500">
              <li><a href="#" class="hover:text-blue-600">首页</a></li>
              <li><span class="mx-2">/</span></li>
              <li class="text-gray-900">新闻资讯</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        <!-- 侧边栏 -->
        <div class="lg:col-span-1">
          <div class="bg-white rounded-lg shadow-lg p-6 sticky top-6">
            <!-- 新闻分类 -->
            <div class="mb-8">
              <h3 class="text-lg font-semibold text-gray-900 mb-4">新闻分类</h3>
              <ul class="space-y-2">
                <li v-for="category in categories" :key="category.id">
                  <button 
                    @click="selectedCategory = category.id"
                    :class="[
                      'w-full text-left px-3 py-2 rounded-md transition-colors duration-200',
                      selectedCategory === category.id 
                        ? 'bg-blue-100 text-blue-700 font-medium' 
                        : 'text-gray-600 hover:bg-gray-100'
                    ]"
                  >
                    {{ category.name }}
                    <span class="float-right text-sm text-gray-400">({{ category.count }})</span>
                  </button>
                </li>
              </ul>
            </div>

            <!-- 热门标签 -->
            <div class="mb-8">
              <h3 class="text-lg font-semibold text-gray-900 mb-4">热门标签</h3>
              <div class="flex flex-wrap gap-2">
                <span v-for="tag in popularTags" :key="tag" 
                      class="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full hover:bg-blue-100 hover:text-blue-700 cursor-pointer transition-colors duration-200">
                  {{ tag }}
                </span>
              </div>
            </div>

            <!-- 最新文章 -->
            <div>
              <h3 class="text-lg font-semibold text-gray-900 mb-4">最新文章</h3>
              <div class="space-y-4">
                <div v-for="article in latestArticles" :key="article.id" 
                     class="flex space-x-3 group cursor-pointer">
                  <img 
                    :src="article.image" 
                    :alt="article.title" 
                    class="w-16 h-16 object-cover rounded-lg flex-shrink-0"
                  >
                  <div class="flex-1 min-w-0">
                    <h4 class="text-sm font-medium text-gray-900 group-hover:text-blue-600 transition-colors duration-200 line-clamp-2">
                      {{ article.title }}
                    </h4>
                    <p class="text-xs text-gray-500 mt-1">{{ article.date }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 主内容区域 -->
        <div class="lg:col-span-3">
          <!-- 搜索和排序 -->
          <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
              <div class="relative flex-1 max-w-md">
                <input 
                  v-model="searchQuery"
                  type="text" 
                  placeholder="搜索新闻..." 
                  class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                <svg class="absolute left-3 top-2.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
              </div>
              <div class="flex items-center space-x-4">
                <select 
                  v-model="sortBy"
                  class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                  <option value="date">按时间排序</option>
                  <option value="views">按浏览量排序</option>
                  <option value="title">按标题排序</option>
                </select>
                <button 
                  @click="viewMode = viewMode === 'grid' ? 'list' : 'grid'"
                  class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors duration-200"
                >
                  <svg v-if="viewMode === 'grid'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"></path>
                  </svg>
                  <svg v-else class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                  </svg>
                </button>
              </div>
            </div>
          </div>

          <!-- 新闻列表 -->
          <div v-if="viewMode === 'grid'" class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <article v-for="news in filteredNews" :key="news.id" 
                     class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 group cursor-pointer">
              <div class="relative overflow-hidden">
                <img 
                  :src="news.image" 
                  :alt="news.title" 
                  class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                >
                <div class="absolute top-4 left-4">
                  <span class="px-3 py-1 bg-blue-600 text-white text-sm rounded-full">{{ news.category }}</span>
                </div>
              </div>
              <div class="p-6">
                <h3 class="text-xl font-semibold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors duration-200 line-clamp-2">
                  {{ news.title }}
                </h3>
                <p class="text-gray-600 mb-4 line-clamp-3">{{ news.excerpt }}</p>
                <div class="flex items-center justify-between text-sm text-gray-500">
                  <div class="flex items-center space-x-4">
                    <span>{{ news.date }}</span>
                    <span>{{ news.views }} 次浏览</span>
                  </div>
                  <div class="flex items-center space-x-1">
                    <span v-for="tag in news.tags.slice(0, 2)" :key="tag" 
                          class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded">
                      {{ tag }}
                    </span>
                  </div>
                </div>
              </div>
            </article>
          </div>

          <!-- 列表视图 -->
          <div v-else class="space-y-6">
            <article v-for="news in filteredNews" :key="news.id" 
                     class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 group cursor-pointer">
              <div class="flex flex-col sm:flex-row">
                <div class="sm:w-1/3 relative overflow-hidden">
                  <img 
                    :src="news.image" 
                    :alt="news.title" 
                    class="w-full h-48 sm:h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  >
                  <div class="absolute top-4 left-4">
                    <span class="px-3 py-1 bg-blue-600 text-white text-sm rounded-full">{{ news.category }}</span>
                  </div>
                </div>
                <div class="sm:w-2/3 p-6">
                  <h3 class="text-xl font-semibold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors duration-200">
                    {{ news.title }}
                  </h3>
                  <p class="text-gray-600 mb-4">{{ news.excerpt }}</p>
                  <div class="flex items-center justify-between text-sm text-gray-500">
                    <div class="flex items-center space-x-4">
                      <span>{{ news.date }}</span>
                      <span>{{ news.views }} 次浏览</span>
                    </div>
                    <div class="flex items-center space-x-1">
                      <span v-for="tag in news.tags.slice(0, 3)" :key="tag" 
                            class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded">
                        {{ tag }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </article>
          </div>

          <!-- 分页 -->
          <div class="mt-12 flex justify-center">
            <nav class="flex items-center space-x-2">
              <button 
                :disabled="currentPage === 1"
                @click="currentPage--"
                class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                上一页
              </button>
              <button 
                v-for="page in visiblePages" 
                :key="page"
                @click="typeof page === 'number' && (currentPage = page)"
                :class="[
                  'px-3 py-2 text-sm font-medium border rounded-md',
                  currentPage === page 
                    ? 'bg-blue-600 text-white border-blue-600' 
                    : 'text-gray-700 bg-white border-gray-300 hover:bg-gray-50'
                ]"
              >
                {{ page }}
              </button>
              <button 
                :disabled="currentPage === totalPages"
                @click="currentPage++"
                class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                下一页
              </button>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 响应式数据
const searchQuery = ref('')
const selectedCategory = ref('all')
const sortBy = ref('date')
const viewMode = ref('grid')
const currentPage = ref(1)
const itemsPerPage = 6

// 新闻分类
const categories = ref([
  { id: 'all', name: '全部新闻', count: 24 },
  { id: 'company', name: '公司新闻', count: 8 },
  { id: 'industry', name: '行业动态', count: 10 },
  { id: 'technology', name: '技术创新', count: 6 }
])

// 热门标签
const popularTags = ref([
  '智能制造', '技术创新', '质量管理', '国际合作', 
  '环保节能', '数字化转型', '产品升级', '市场拓展'
])

// 最新文章
const latestArticles = ref([
  {
    id: 1,
    title: '公司荣获2023年度优秀制造企业奖',
    date: '2023-12-15',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=award%20ceremony%20manufacturing%20excellence%20recognition&image_size=square'
  },
  {
    id: 2,
    title: '新一代智能化生产线正式投产',
    date: '2023-12-10',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=smart%20production%20line%20automated%20manufacturing&image_size=square'
  },
  {
    id: 3,
    title: '与德国技术公司签署战略合作协议',
    date: '2023-12-05',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=business%20partnership%20signing%20ceremony%20international%20cooperation&image_size=square'
  }
])

// 新闻数据
const newsData = ref([
  {
    id: 1,
    title: '公司荣获2023年度优秀制造企业奖',
    excerpt: '在刚刚结束的2023年度制造业表彰大会上，我公司凭借在技术创新、质量管理和可持续发展方面的突出表现，荣获"优秀制造企业"称号。',
    content: '详细内容...',
    category: '公司新闻',
    categoryId: 'company',
    date: '2023-12-15',
    views: 1250,
    tags: ['企业荣誉', '制造业', '技术创新'],
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=award%20ceremony%20manufacturing%20excellence%20recognition%20corporate%20achievement&image_size=landscape_4_3'
  },
  {
    id: 2,
    title: '新一代智能化生产线正式投产',
    excerpt: '经过6个月的安装调试，我公司投资2000万元建设的新一代智能化生产线正式投入生产，预计年产能将提升30%。',
    content: '详细内容...',
    category: '技术创新',
    categoryId: 'technology',
    date: '2023-12-10',
    views: 980,
    tags: ['智能制造', '生产线', '技术升级'],
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=smart%20production%20line%20automated%20manufacturing%20modern%20factory&image_size=landscape_4_3'
  },
  {
    id: 3,
    title: '与德国技术公司签署战略合作协议',
    excerpt: '公司与德国知名技术公司正式签署战略合作协议，将在高端装备制造、技术研发等领域开展深度合作。',
    content: '详细内容...',
    category: '公司新闻',
    categoryId: 'company',
    date: '2023-12-05',
    views: 1580,
    tags: ['国际合作', '技术引进', '战略合作'],
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=business%20partnership%20signing%20ceremony%20international%20cooperation%20handshake&image_size=landscape_4_3'
  },
  {
    id: 4,
    title: '2023年第三季度业绩创历史新高',
    excerpt: '公司2023年第三季度实现营业收入5.2亿元，同比增长25%，净利润达到8500万元，各项经营指标均创历史新高。',
    content: '详细内容...',
    category: '公司新闻',
    categoryId: 'company',
    date: '2023-11-28',
    views: 2100,
    tags: ['业绩报告', '财务数据', '企业发展'],
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=business%20growth%20financial%20success%20charts%20graphs%20corporate%20achievement&image_size=landscape_4_3'
  },
  {
    id: 5,
    title: '绿色制造技术获得国家专利认证',
    excerpt: '公司自主研发的绿色制造技术获得国家发明专利认证，该技术可有效降低生产过程中的能耗和排放。',
    content: '详细内容...',
    category: '技术创新',
    categoryId: 'technology',
    date: '2023-11-20',
    views: 750,
    tags: ['绿色制造', '专利技术', '环保节能'],
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=green%20manufacturing%20technology%20environmental%20friendly%20production%20patent&image_size=landscape_4_3'
  },
  {
    id: 6,
    title: '行业数字化转型趋势分析',
    excerpt: '随着工业4.0的深入发展，制造业数字化转型已成为必然趋势。本文深入分析了当前行业数字化转型的现状和未来发展方向。',
    content: '详细内容...',
    category: '行业动态',
    categoryId: 'industry',
    date: '2023-11-15',
    views: 1320,
    tags: ['数字化转型', '工业4.0', '行业趋势'],
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=digital%20transformation%20industry%204.0%20manufacturing%20technology%20trends&image_size=landscape_4_3'
  }
])

// 计算属性
const filteredNews = computed(() => {
  let filtered = newsData.value

  // 按分类筛选
  if (selectedCategory.value !== 'all') {
    filtered = filtered.filter(news => news.categoryId === selectedCategory.value)
  }

  // 按搜索关键词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(news => 
      news.title.toLowerCase().includes(query) ||
      news.excerpt.toLowerCase().includes(query) ||
      news.tags.some(tag => tag.toLowerCase().includes(query))
    )
  }

  // 排序
  filtered.sort((a, b) => {
    switch (sortBy.value) {
      case 'date':
        return new Date(b.date).getTime() - new Date(a.date).getTime()
      case 'views':
        return b.views - a.views
      case 'title':
        return a.title.localeCompare(b.title)
      default:
        return 0
    }
  })

  // 分页
  const start = (currentPage.value - 1) * itemsPerPage
  const end = start + itemsPerPage
  return filtered.slice(start, end)
})

const totalPages = computed(() => {
  let filtered = newsData.value
  
  if (selectedCategory.value !== 'all') {
    filtered = filtered.filter(news => news.categoryId === selectedCategory.value)
  }
  
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(news => 
      news.title.toLowerCase().includes(query) ||
      news.excerpt.toLowerCase().includes(query) ||
      news.tags.some(tag => tag.toLowerCase().includes(query))
    )
  }
  
  return Math.ceil(filtered.length / itemsPerPage)
})

const visiblePages = computed(() => {
  const pages: (number | string)[] = []
  const total = totalPages.value
  const current = currentPage.value
  
  if (total <= 7) {
    for (let i = 1; i <= total; i++) {
      pages.push(i)
    }
  } else {
    if (current <= 4) {
      for (let i = 1; i <= 5; i++) {
        pages.push(i)
      }
      pages.push('...', total)
    } else if (current >= total - 3) {
      pages.push(1, '...')
      for (let i = total - 4; i <= total; i++) {
        pages.push(i)
      }
    } else {
      pages.push(1, '...')
      for (let i = current - 1; i <= current + 1; i++) {
        pages.push(i)
      }
      pages.push('...', total)
    }
  }
  
  return pages.filter(page => page !== '...' || pages.indexOf(page) === pages.lastIndexOf(page))
})
</script>

<style scoped>
/* 文本截断样式 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 平滑过渡效果 */
.transition-transform {
  transition: transform 0.3s ease;
}

.transition-colors {
  transition: color 0.2s ease, background-color 0.2s ease;
}

.transition-shadow {
  transition: box-shadow 0.3s ease;
}

/* 悬停效果 */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

.group:hover .group-hover\:text-blue-600 {
  color: #2563eb;
}
</style>